<template>
	<view style="font-size: 14px;">
		<view class="op_btn_div">
			<view :class="isDisable ? 'btn2' : 'btn1'" @click.stop="onPrintTest()">测试打印机</view>
		</view>
		<view v-if="isDisable" style="display: flex;justify-content: center;margin: 24rpx 0 0 0;">
			请{{second}}秒后再打印...
		</view>
		<view v-else style="display: flex;justify-content: center;margin: 24rpx 0 0 0;">点击上方按钮👆测试打印机</view>

		<view style="display: flex;justify-content: center;margin: 24rpx 0 0 0;">
			<view @click="onModel(1)">模版1</view>
			<view @click="onModel(2)" style="margin: 0 0 0 36rpx;">模版2</view>
			<view @click="onModel(3)" style="margin: 0 0 0 36rpx;">模拟下单</view>
		</view>

	</view>
</template>

<script>
	import { getCLodop, getPrinterList } from '@/util/LodopFuncs.js'
	import { timestampToYMDHMS, timestampToYMDHM } from '@/util/util.js'
	export default {
		data() {
			return {
				// wss_url: 'ws://47.104.94.65:8282', // webSocket服务器地址
				wss_url: 'ws://47.104.94.65:8284', // webSocket服务器地址
				socketTask: {}, // 连接WebSocket返回的socketTask对象

				isDisable: false, // 是否禁用打印按钮
				second: 6, // 禁用秒数
				LODOP: {},

				model_html: ``,

				info: {}, // ws传过来的数据
				goods_info: [], // 货物列表

			}
		},

		mounted() {

			// uni.setNavigationBarTitle({ title: '-- 打印托运单 --' })

			const ip = '127.0.0.1'
			uni.setStorageSync('fl_ip', ip)

			// 连接ws
			this.connectSocket()
		},

		methods: {

			// 打印运单
			onPrint001() {
				if (this.isDisable) {
					uni.showToast({ icon: 'none', title: `请${this.second}秒后再打印` })
					return
				}
				// 获取 Lodop 对象
				this.LODOP = getCLodop()
				this.LODOP.SET_LICENSES("上海硕诺信息科技有限公司", "E6F7EB898EE17DEFD002D1E8A683CA26", "", "");
				this.LODOP.PRINT_INIT('')
				// 设置打印内容
				let strHTML =
					`
			<!-- HTML代码开始 -->
		<!-- 左侧:主体 右侧:二维码 -->
		<div style="display: flex;width: 760px;">
			<!-- 标题+表格 -->
			<div style="display: flex;flex-direction: column;width: 660px;">
				<div style="display: flex;align-items: center;">
					<div style="margin: 0 150px 0 60px;visibility: hidden;">送货</div>
					<div style="font-size: 21px;font-family: '宋体';font-weight: bold;margin: 0 0 0 90rpx;">致胜物流托运单</div>
				</div>
				<div style="display: flex;justify-content: space-between;font-size: 15px;margin: 2px 10px 0 10px;">
					<div>起运站：${this.info.startCity}</div>
					<div>到站：${this.info.st_point_name}</div>
					<div>中转站：</div>
					<div>运单号：${this.info.od_num}</div>
				</div>
				<table style="border: 1px solid black;border-collapse: collapse;text-align: center;width: 660px;">
					<tr>
						<td style="border: 1px solid black;min-width: 80px;">发货</td>
						<td style="border: 1px solid black;max-width: 100px;min-width: 80px;"></td>
						<td style="border: 1px solid black;max-width: 80px;min-width: 60px;">电话</td>
						<td style="border: 1px solid black;min-width: 100px;"></td>
						<td style="border: 1px solid black;min-width: 80px;">身份ID</td>
						<td colspan="2" style="border: 1px solid black;max-width: 100px;"></td>
					</tr>
					<tr>
						<td style="border: 1px solid black;min-width: 80px;">收货</td>
						<td style="border: 1px solid black;max-width: 100px;min-width: 80px;">${this.info.cee_name}</td>
						<td style="border: 1px solid black;max-width: 80px;min-width: 60px;">电话</td>
						<td style="border: 1px solid black;min-width: 100px;">${this.info.cee_mobile}</td>
						<td style="border: 1px solid black;min-width: 80px;">卡号</td>
						<td colspan="2" style="border: 1px solid black;max-width: 100px;"></td>
					</tr>

					<tr>
						<td style="border: 1px solid black;max-width: 100px;;">货名</td>
						<td style="border: 1px solid black;max-width: 100px;min-width: 80px;">件数</td>
						<td style="border: 1px solid black;max-width: 80px;min-width: 60px;">保费</td>
						<td style="border: 1px solid black;width: 100px;font-size: 15px;">付款方式</td>
						<td style="border: 1px solid black;max-width: 50px;">运费</td>
						<td style="border: 1px solid black;min-width: 50px;">代收</td>
						<td style="border: 1px solid black;min-width: 50px;">提付</td>
					</tr>
					<tr>
						<td style="border: 1px solid black;max-width: 100px;">${this.goods_info[0].name}</td>
						<td style="border: 1px solid black;max-width: 100px;min-width: 80px;">${this.goods_info[0].num}</td>
						<td style="border: 1px solid black;max-width: 80px;min-width: 60px;"></td>
						<td style="border: 1px solid black;width: 100px;"></td>
						<td style="border: 1px solid black;max-width: 50px;"></td>
						<td style="border: 1px solid black;min-width: 50px;"></td>
						<td style="border: 1px solid black;min-width: 50px;"></td>
					</tr>

					<tr>
						<td colspan="1" style="border: 1px solid black;max-width: 140px;">货号</td>
						<td colspan="2" style="border: 1px solid black;max-width: 140px;"></td>
						<td colspan="4" style="border: 1px solid black;max-width: 140px;text-align: left;">备注：</td>
					</tr>

					<tr>
						<td colspan="5" style=";border: 1px solid black;">
							<div style="display: flex;">
								<div>到站地址：${this.info.st_point_name}</div>
								<div style="margin: 0 0 0 20px;">电话：</div>
							</div>
						</td>
						<td colspan="1" style="border: 1px solid black;max-width: 140px;">回单</td>
						<td colspan="5" style="border: 1px solid black;max-width: 140px;"></td>
					</tr>

					<tr>
						<td colspan="7" style="font-size: 10px;">
							托运需知：
							1、开单时，不得虚报货名、危险品不予托运、否则出现一切损失由托运人负责；
							2、有保价时、发生货差、货损时按货物实际损失的价格赔偿、最高为该批货物的声明保价；如未保价发生货损货差时最多不超过运费的3倍，代收货款不作为赔偿依据，签收时请清点检查物品是否完好、已经签收概不负责；
							3、此单据收取运费均未含税；如需发票请联系财务预约开票；
							4、对于易碎品、陶瓷、玻璃（瓶）、生鲜、冻品、液体以及不可拆解的大型运输货物造成货差、货损不予理赔、保运不保损。
							5、托运人提供的收获地址或联系方式不准确，造成货物无法交付、延迟交付或交付错误的，承运人不承担责任，承运人并有权就额外运输服务加计运费。
							6、发生纠纷由临沂仲裁委裁决。
							7、此单据签收3日后不再做追责依据！如您在本公司托运货物，意味着你已知晓并认可托运须知。
						</td>
					</tr>
				</table>
				<div style="display: flex;justify-content: space-between;font-size: 13px;margin: 0 10px 0 10px;">
					<div>查货电话:05398535656</div>
					<div>查款电话:18315721572</div>
					<div>打印时间:${timestampToYMDHMS(Date.now())}</div>
					<div>制单人:致胜物流</div>
				</div>
			</div>
			<!-- 二维码查货 -->
			<div style="display: flex;flex-direction: column;width: 100px;align-items: center;justify-content: center;">
				<image style="width: 66px;height: 66px;" src="/static/a_qrcode_01.jpg"></image>
				<div style="margin: 16px 0 0 0;font-size: 14px;">微信扫码查货</div>
			</div>
		</div>
			<!-- HTML代码结束 -->
							`
				// strHTML = '.'
				this.LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', strHTML)
				this.LODOP.SET_PRINT_PAGESIZE(2, 780, 2170, '')
				this.LODOP.SET_PRINT_COPIES(1)
				// 开始打印
				this.LODOP.PRINT()

				this.isDisable = true

				let interval = setInterval(() => {
					if (this.second > 0) {
						this.second = --this.second
					}
				}, 1000)
				setTimeout(() => {
					clearInterval(interval)
					this.isDisable = false
					this.second = 6
				}, 6000)
			},

			// 查看打印模版
			onModel(type) {
				if (type == 1) {
					uni.navigateTo({ url: '/pages/sys/print_model_01' })
				}
				if (type == 2) {
					uni.navigateTo({ url: '/pages/sys/print_model_02' })
				}
				if (type == 3) { // 模拟下单
					this.demo_cmm_order()
				}
			},
			// 测试打印机
			onPrintTest() {
				// uni.showToast({ icon: 'none', title: '仅开发人员可用' })
				// return
				// 获取 Lodop 对象
				this.LODOP = getCLodop()
				this.LODOP.SET_LICENSES("上海硕诺信息科技有限公司", "E6F7EB898EE17DEFD002D1E8A683CA26", "", "");
				this.LODOP.PRINT_INIT('')
				let strHTML =
					`
						<div>测试打印机</div>
						<div>时间:${timestampToYMDHMS(Date.now())}</div>
					`
				this.LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', strHTML)
				this.LODOP.SET_PRINT_PAGESIZE(2, 0, 0, '')
				// 开始打印
				this.LODOP.PRINT()
			},

			// 连接socket
			connectSocket() {
				let that = this
				this.socketTask = uni.connectSocket({
					url: this.wss_url,
					success: (res) => {
						console.log('socket连接成功,res = ', res)
					},
					fail: (res) => { console.log('socket连接失败,res = ', res) },
				})
				// 收到服务端的socket消息
				that.socketTask.onMessage((res) => {
					console.log('微信客服打印.收到服务端的socket消息.socketTask.onMessage.res = ', res);
					if (res && res.data) {
						try {
							let ws_json_obj = JSON.parse(res.data)
							console.log('ws数据转json_obj = ', ws_json_obj);
							if (ws_json_obj) {
								// 保存服务端通过socket传的值
								let { od_num, startCity, st_point_name, cee_name, cee_mobile, goods } = ws_json_obj.res
								that.info = { od_num, startCity, st_point_name, cee_name, cee_mobile }

								that.goods_info = goods

								that.onPrint001()
							}
						} catch (error) {
							console.log('打印错误...', error);
						}
					}

				})
			},

			// 接口:上报数据
			async demo_cmm_order() {
				let that = this
				// let token = getUInfo().token
				uni.showLoading({ title: '加载中', mask: true, })
				// let order_sn = 'zs250921906'
				let order_sn = 'CD250909466'
				let res = await that.$demoCmmOrder({ order_sn })
				console.log('$demoCmmOrder.res = ', res);
				if (res.code == 1) {
					// 报名成功,重置页面数据,清除保存的包名信息草稿
					that.resetData()
					uni.showModal({ title: '提示', content: res.msg, })
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

		},

	}
</script>

<style scoped>
	/* 操作按钮容器 */
	.op_btn_div {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10vh 0 0 0;
		font-size: 26rpx;
	}

	.btn1 {
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border: solid #000 1px;
		border-radius: 8rpx;
		margin: 0 0 0 0rpx;
	}

	.btn2 {
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: #aaa;
		border: solid #aaa 1px;
		border-radius: 8rpx;
		margin: 0 0 0 0rpx;
	}
</style>